import { CommandLabeledItemWrapper } from '@app-base/common/components/command-form/item-wrapper';
import { MouseActionInput } from '@app-base/common/components/pick-input/mouse-action-input';
import { Icon, LengthUnit, useUnit } from '@amcax/base';
import { PickInputEvents } from '@app-base/common/components/pick-input/types';
import { userEvents } from '@app-base/module';
import { InputNumber } from 'antd';
import { useEffect, useState } from 'react';
export type Props = {
  label: string;
  isActive: boolean;
  cmdRef;
  onFocus: () => void;
  options?: string[];
  param;
  relyKey?: 'antPoint' | 'elecPoint';
  canFocusOther?: boolean;
  canBeAutoFocused?: boolean;
  focusID?: number;
  onRemove?: () => void;
  onChange?: (v: number, i: number) => void;
};
const unitTran: { [key in LengthUnit]: number } = {
  m: 0.001,
  dm: 0.01,
  cm: 0.1,
  mm: 1,
  ft: 0.00328,
  in: 0.0394,
};
const XYZ = ['X', 'Y', 'Z'];
export function ComCommand({
  label,
  isActive,
  onFocus,
  cmdRef,
  param,
  relyKey = 'antPoint',
  onRemove,
  onChange = () => {},
}: Props) {
  const { lengthUnit } = useUnit();
  const register = () => {
    unRegister();
    userEvents.emit(PickInputEvents.Input3dFocused);
    userEvents.on(PickInputEvents.Input3dFocused, unRegister);
  };
  const unRegister = () => {
    userEvents.off(PickInputEvents.Input3dFocused);
  };
  const [multiple, setMultiple] = useState<number>(1);
  useEffect(() => {
    setMultiple(unitTran[lengthUnit]);
  }, [lengthUnit, param?.[relyKey]?.point]);
  return (
    <CommandLabeledItemWrapper
      textClassName='text-reset'
      className='mt_10'
      label={label}>
      <MouseActionInput
        active={isActive}
        onActiveFocus={() => {
          register();
          onFocus();
          cmdRef?.setFormKey(relyKey);
        }}
        placeholder='请选择点'
        disabled={false}>
        {param?.[relyKey]?.point && (
          <div className='pick-input_base-select_selection'>
            <div className='flex_1'>
              <div>{param[relyKey]?.name}</div>
              {param?.[relyKey]?.point.map((v, i) => (
                <div className='mt_10 w_full flex gap_10'>
                  <span className='pt_4'>{XYZ[i]}:</span>
                  <InputNumber
                    onChange={(val) => onChange(val / multiple, i)}
                    changeOnWheel
                    className='flex_1'
                    value={multiple * v}></InputNumber>
                  <span className='pt_4'>{lengthUnit}</span>
                </div>
              ))}
            </div>
            <div onClick={onRemove}>
              <Icon
                tabIndex={0}
                name='commons/close'
              />
            </div>
          </div>
        )}
      </MouseActionInput>
    </CommandLabeledItemWrapper>
  );
}
